<template>
  <view class="login-container">
    <uni-icons type='contact-filled'
               color='#afafaf'
               size='100'></uni-icons>
    <button class="btn-login"
            @click="toLogin">一键登录</button>
    <text class="tips-text">登陆后尽享更多权益</text>
  </view>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
export default ({
  computed: {
    ...mapGetters('user', ['getRedirectiveInfo'])
  },
  methods: {
    ...mapMutations('user', ['setuserInfo', 'setToken']),
    // 点击登陆按钮，获取用户信息和code信息，获取到的用户信息请求后台接口用户信息是否正确，获取token并保存token，
    // 如果重定向页面信息中有数据则跳转到重定向页面中去，如果重定向数据中没有页面则跳转到我的信息页面
    async toLogin () {
      // 获取用户信息，使用getUserProfile。getUserInfo被淘汰了，会出错,禁用！！！
      // 数组结构赋值---重！！！如果结构赋值右边要复制的数组中没有当前项我们要给左边的变量给一个默认值
      let [err, { encryptedData, iv, rawData, signature, userInfo } = "undefined"] = await uni.getUserProfile({
        desc: '为了给您更好的服务'
      })
      // 判断是否点击了不允许访问微信用户信息，拒绝了就提示用户无法完成接下来的操作
      if (err) {
        uni.showToast({
          title: '如果不进行用户登陆授权，您将无法完成接下来的操作',
          icon: 'none'
        })
      }
      console.log(encryptedData, iv, rawData, signature);
      // 因为用户信息再我的信息页面也要使用，所有把用户信息存储到本地
      this.setuserInfo({ encryptedData, iv, rawData, signature, userInfo })
      // 获取用户信息的code
      let [, { code }] = await uni.login()
      // 把获取到的userInfo和token进行用户登陆请求保存请求回来的token
      setTimeout(() => {
        // 保存token
        this.setToken('1111')
      }, 1000);
      // 判断本地是否有token,有token就发生跳转
      if (this.getRedirectiveInfo) {
        console.log(111);
        //如果重定向里面有重定向页面也跳转到重定向页面中
        uni.switchTab({
          url: this.getRedirectiveInfo,
          success: () => {
            uni.showToast({
              title: '登陆成功'
            })
          }
        })

        // this.setRedirectiveInfo(null)

        // 如果重定向页面中没有重定向则跳转到我的信息页面
      } else {
        uni.switchTab({
          url: '/components/my-userInfo/my-userInfo'
        })

      }

    }
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;

  // 绘制登录盒子底部的半椭圆造型
  &::after {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }

  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
    color: white;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}
</style>